<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 14px;
        }
        .triangle{
            margin: 1% auto ;
            width: 50%;
            background-color: #ebebe9;
        }
        .triangle ul{
            padding: 10px;
        }
        .triangle li{
            padding: 5px;
            margin-bottom: 10px;
        }
        .triangle li span{
            position: relative;
            border-radius: 7px;
            background-color: #a6e860;
            padding: 6px 10px 8px 10px;
            z-index: 1;
        }
        .triangle .textLeft span{
            background-color: white;
        }
        .triangle li.textLeft:before{
            content: url("img/icon/wumen.ico");
            box-sizing: border-box;
            position: relative;
            left: -22px;
            top: 9px;
        }
        .triangle li.textLeft span:before{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right: 8px solid white;
            position: absolute;
            top: 8px;
            left: -16px;
        }
        .triangle li.textRight:after{
            content: url("img/icon/man.ico");
            box-sizing: border-box;
            position: relative;
            right: -15px;
            top: 9px;
        }
        .triangle li.textRight span:after{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-left: 8px solid #a6e860;
            position: absolute;
            top: 8px;
            right: -16px;
        }
        li{
            list-style: none;
        }
        .textRight{
            text-align: right;
        }
        .title{
            text-align: center;
        }

    </style>
</head>
<body>
<div class="triangle">
    <div class="title"><p>聊天界面</p></div>
    <hr>
    <ul>
        <li class="textLeft">
            <span>msg~</span>
        </li>
        <li class="textRight">
            <span>msg！</span>
        </li>
        <li class="textLeft">
            <span>msg</span>
        </li>
        <li class="textRight">
            <span>msg^_^</span>
        </li>
        <li class="textLeft">
            <span>msg！msg</span>
        </li>
        <li class="textRight">
            <span>msg</span>
        </li>
    </ul>
</div>

</body>
</html>